<template>
	<view class="content">
		<view v-if="hasLogin" class="hello">
			<view class="title">
				您好 {{userName}}，您已成功登录。
			</view>
			<view class="ul">
				<view>这是 uni-app 带登录模板的示例App首页。</view>
				<view>在 “我的” 中点击 “退出” 可以 “注销当前账户”</view>
			</view>
		</view>
		<view v-if="!hasLogin" class="hello">
			<view class="title">
				您好 游客。
			</view>
			<view class="ul">
				<view>这是 uni-app 带登录模板的示例App首页。</view>
				<view>在 “我的” 中点击 “登录” 可以 “登录您的账户”</view>
			</view>
		</view>
		<!-- <uni-card title="标题文字" thumbnail="https://img-cdn-qiniu.dcloud.net.cn/new-page/uni.png" extra="额外信息" note="Tips">
			内容主体，可自定义内容及样式
		</uni-card>-->
		<uni-card title="曾经的小山村" mode="style" :is-shadow="true" thumbnail="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg"
		 extra="Dcloud 2019-05-20 12:32:19" note="Tips">
			那是一个秋意盎然、金风送爽的日子，我和父母一起来到了位于上师大旁的康健园。一踏进公园，一股浓郁的桂香扑鼻而来，泌人心脾,让我心旷神怡，只见一朵朵开得正烈的金色桂花，迎风而立，仿佛在向我招手。我们追着这桂香，走进了清幽的公园。
		</uni-card> 
		<!-- <uni-fab :pattern="pattern" :content="content" :horizontal="horizontal" :vertical="vertical" :direction="direction"
		 @trigger="trigger"></uni-fab> -->
		 <view v-if="isModile">手机</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters
	} from 'vuex'
	import uniCard from "@/components/uni-card/uni-card"
	export default {
		data() {
			return {
				text: '',
				horizontal: 'left',
				vertical: 'bottom',
				direction: 'horizontal',
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#007AFF',
					buttonColor: "#007AFF"
				},
				content: [{
						iconPath: '/static/component.png',
						selectedIconPath: '/static/componentHL.png',
						text: '组件',
						active: false
					},
					{
						iconPath: '/static/api.png',
						selectedIconPath: '/static/apiHL.png',
						text: 'API',
						active: false
					},
					{
						iconPath: '/static/template.png',
						selectedIconPath: '/static/templateHL.png',
						text: '模版',
						active: false
					}
				]
			}
		},
		computed: {
			...mapState(['forcedLogin', 'hasLogin', 'userName']),
			...mapGetters(['isMobile'])
		},
		components: {
			uniCard
		},
		onLoad() {
			// this.authorize()
		},
		methods: {
			trigger(e) {
				console.log(e);
				this.content[e.index].active = !e.item.active;
				uni.showModal({
					title: '提示',
					content: `您${this.content[e.index].active?'选中了':'取消了'}${e.item.text}`,
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			authorize() { // 判断获取用户信息 是否授权
				if (this.hasLogin) { // 首次使用 授权时已经登录
					this.initData()
					this.open_id = this.$store.state.uid
					return
				}
				uni.getSetting({
					success: (res) => {
						if (!res.authSetting["scope.userInfo"]) {
							uni.reLaunch({
								url: '../login/authorize'
							})
						} else {
							uni.login({ // 登录信息
								provider: 'weixin',
								success: (loginRes) => {
									// 获取用户信息
									uni.getUserInfo({
										provider: 'weixin',
										success: (infoRes) => {
											let loginData = {}
											loginData.code = loginRes.code
											loginData.image_url = infoRes.userInfo.avatarUrl
											loginData.nickname = infoRes.userInfo.nickName
											this.getOpenId(loginData)
										}
									});
								}
							})
						}
					}
				})
			},
			getOpenId(loginData) {
				console.log('openid')
			}
		}
	}
</script>

<style>
	.hello {
		display: flex;
		flex: 1;
		flex-direction: column;
	}

	.title {
		color: #8f8f94;
		margin-top: 50upx;
	}

	.ul {
		font-size: 30upx;
		color: #8f8f94;
		margin-top: 50upx;
	}

	.ul>view {
		line-height: 50upx;
	}
</style>
<style lang="scss" scoped>
	/* @media 最适合于响应式页面开发 */
	@media screen and (min-width: 768px){
		.hello {
			background-color: #007AFF;
		}
	}
	@media screen and (max-width: 767px){
		.hello {
			background-color: red;
		}
	}
</style>
